<template>
  <div class="content_box">
    <div class="top_box">
      <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230714/SsdRzYmNZk1q32h5Jjj9.png" alt="">
      <div class="nr_box">
        <p :style="{height:statusBarHeight+'px'}"></p>
        <div class="nr" :style="{height:titleBarHeight+'px'}">
          <p class="icon" @click="back" v-if="shareType == 0"><van-icon name="arrow-left" /></p>
          <p class="icon" @click="toHome" v-else><van-icon name="wap-home-o" /></p>
          <p class="text">转赠订单</p>
          <p class="icon"></p>
        </div>
      </div>
    </div>
    <div class="content_box">
      <div class="box">
        <p class="title">订单信息</p>
        <div class="room_msg">
          <p class="img">
            <van-image
              width="140rpx"
              height="160rpx"
              fit="cover"
              lazy-load
              radius="20rpx"
              :src="msg.roomImg && msg.roomImg.length?msg.roomImg[0]:''"
            />
          </p>
          <div class="msg">
            <p class="name">{{msg.roomName}}</p>
            <div class="label_box">
              <p v-for="(item,index) in msg.labelVoList" :key="index">{{item.labelName}}</p>
            </div>
          </div>
        </div>
        <div class="list_box">
          <div class="list">
            <p class="title1">所属店铺</p>
            <p class="text">{{msg.storeName}}</p>
          </div>
          <div class="list">
            <p class="title1">订单状态</p>
            <p class="text">已支付</p>
          </div>
          <div class="list">
            <p class="title1">支付方式</p>
            <p class="text">{{msg.payType == 1?'余额支付':msg.payType == 2?'美团验券':msg.payType == 3?'抖音验券':msg.payType == 4?'卡券兑换':'微信支付'}}</p>
          </div>
          <div class="list">
            <p class="title1">开始时间</p>
            <p class="text">{{msg.startTime}}</p>
          </div>
          <div class="list">
            <p class="title1">结束时间</p>
            <p class="text">{{msg.endTime}}</p>
          </div>
          <div class="list">
            <p class="title1">消费时长</p>
            <p class="text">{{msg.timeLength}}小时</p>
          </div>
          <div class="list">
            <p class="title1">订单编号</p>
            <p class="text">{{msg.orderCode}}</p>
          </div>
        </div>
        <div class="tips">
          <p class="t">!</p>
          <p class="text">说明：一旦将订单转赠给好友，并且好友领取了你将不能进行订单开门、退款等操作；好友可进行开门、退款操作。</p>
        </div>
        <div class="share_box" v-if="shareType == 1">
          <p class="title1">分享者信息</p>
          <div class="msg">
            <div class="left">
              <img src="/static/images/share_user.png" alt="">
              用户
            </div>
            <p class="tell">{{msg.userTel}}</p>
          </div>
        </div>
        <div class="button_box" v-if="msg.giveOrder == 0 && msg.orderTotalState == 0 || msg.giveOrder == 0 && msg.orderTotalState == 1">
          <button v-if="shareType == 0" class="anniu" open-type="share">确认转赠</button>
          <van-button 
            v-else
            @click="submit"
            :disabled="loading"
            :loading="loading" 
            loading-text="接收中..."
            type="primary"
            color="#3d98f7"
            custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 312rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
          >确认接收</van-button>
        </div>
        <div class="button_box" v-else>
          <p class="lq_box" v-if="msg.giveOrder == 1&&msg.orderTotalState != 2">订单已领取</p>  
          <p class="lq_box" v-if="msg.orderTotalState == 2">订单已结束</p>          
          <p class="lq_box" v-if="msg.giveOrder == 3">订单已退款</p>                  
        </div>
        <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230714/mbk7EYoAgOVnHNun3eoj.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getToken,
} from "@/utils/auth";
import { Debounce } from "@/utils"
import { getMyOrderDetails,transferOrder } from "@/api/index";
export default {
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      orderId:'',
      msg:{},
      shareType:0,
      loading:false
    };
  },
  methods: {

    

    // 接受订单
    submit(){
      wx.showModal({
        title: '温馨提示',
        content: '确认接收该订单？',
        success: (result) => {
          this.$showLoading('接收中...')
          this.loading = true
          transferOrder({orderId:this.orderId}).then(res=>{
            if(res.statusCode == '00000'){
              this.$toast('已接收')
              setTimeout(() => {
                wx.navigateTo({
                  url: `/pages/order_xq/main?orderId=${this.orderId}`
                })
              }, 1000);
            }else{
              wx.hideLoading()
              this.loading = false
              this.$toast(res.message)
            }
          })
        }
      })
    },

    back(){
      wx.navigateBack({
        delta: 1
      });
    },

    toHome(){
      wx.switchTab({
        url: '/pages/home/main'
      })
    },

    // 获取订单详情
    getDetails(){
      this.$showLoading('加载中...')
      getMyOrderDetails({orderId:this.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          res.data.timeLength = this.getHour(res.data.startTime,res.data.endTime)
          this.msg = res.data
          wx.hideLoading()
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 算选择多少小时
    getHour(s1, s2) {
      var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
      s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
      s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
      var ms = s2.getTime() - s1.getTime();
      if (ms < 0) return 0;
      return (ms / 1000 / 60 / 60).toFixed(1);  //小时
    },
  },
  onShow(){
    this.loading = false
  },
  onLoad(options) {
    //console.log(options)
    if(options.shareType){
      this.shareType = options.shareType
    }else{
      this.shareType = 0
    }
    this.orderId = options.orderId
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getDetails()
            }
          })
        }
      })
    }else{
      this.getDetails()
    }
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        //console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onShareAppMessage() {
   return {
     title: '您有一份转赠订单，请查收~',
     path: `/pages/giveFriends/main?shareType=1&orderId=${this.orderId}`,
     imageUrl:'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230718/vSumUOfjoOmPQAX85LXA.png'
    }
 },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #F5F5F5;
  .top_box{
    width: 100%;
    height: 420rpx;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
    }
    .nr_box {
      position: relative;
      .nr{
        margin:0 34rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon{
          width: 50rpx;
          height: 50rpx;
          color:#fff;
          font-size:50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .text{
          font-size: 34rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }
  }
  .content_box{
    margin:-210rpx 32rpx 0 32rpx;
    position: relative;
    border-radius: 16rpx;
    .box{
      padding:0 32rpx;
      background: #fff;
      border-radius: 16rpx;
      position: relative;
      padding-bottom:30rpx;
      .title{
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
        padding:32rpx 0;
      }
      .room_msg{
        display: flex;
        align-items: center;
        border-bottom:1px dashed #CECECF;
        padding-bottom:30rpx;
        .msg{
          margin-left:24rpx;
          .name{
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
          }
          .label_box{
            p{
              display: inline-block;
              padding:0 12rpx;
              height: 40rpx;
              line-height: 40rpx;
              background: #FFFFFF;
              border: 2rpx solid #00C200;
              border-radius: 10rpx;
              margin-right:16rpx;
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00C200;
              margin-top:18rpx;
            }
          }
        }
      }
      .list_box{
        .list{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top:32rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
          .text{
            color: #111111;
          }
        }
      }
      .tips{
        padding:24rpx 30rpx;
        background: #FFF6F6;
        display: flex;
        margin:48rpx 0 70rpx 0;
        border-radius: 8rpx;
        .t{
          width: 24rpx;
          height: 24rpx;
          border:1px solid #FF302D;
          border-radius: 50%;
          color:#FF302D;
          font-size:20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          position: relative;
          top:6rpx;
        }
        .text{
          flex: 1;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #FF302D;
          line-height: 40rpx;
        }
      }
      .share_box{
        border-top:1px dashed #CECECF;
        padding-top:32rpx;
        margin-bottom:54rpx;
        .title1{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
        }
        .msg{
          display: flex;
          align-items: center;justify-content: space-between;
          margin-top:32rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
          .left{
            display: flex;
            align-items: center;
            img{
              width: 28rpx;
              height: 32rpx;
              margin-right:22rpx;
            }
          }
          .tell{
            color:#111;
          }
        }
      }
      .button_box{
        text-align: center;
        .lq_box{
          width: 312rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #aaa;
          border-radius: 40rpx;
          margin:0 auto;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      .anniu{
        width: 312rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        margin:0 auto;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        &.on{
          background: #9ae49a;
          border:none;
        }
      }
      .bj{
        position: absolute;
        left: 0;
        bottom:-80rpx;
        width: 100%;
        height: 100rpx;
      }
    }
  }
}

</style>